<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>客诉单</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./styles/vant.index.css" />
    <link rel="stylesheet" href="./styles/page.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./js/vue.min.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/rules.js"></script>
    <script src="./js/qs.js"></script>
  </head>
  <body>
    <div id="app" >
    </div>
    <template id="first" class="container">
      <!--表单填写-->
      
 
      <van-form ref="myform" style="padding-bottom:20px">
        <div class="header">
           <div class="headerTitle">
               <img src="./img/title.png"/>
               <div>感谢您反馈问题，我们将及时联系您给与处理！</div>
           </div>
           <img src="./img/23.png" class="headerImg"/>
        </div>
        <div class="box">
          <div class="title">请填写相关信息</div>
          <van-cell-group>
            <van-field
              v-model="accountname"
              name="accountname"
              label="公司名称"
              aria-required="true"
              input-align="right"
              error-message-align="right"
              placeholder="请输入"
              :rules="[{ required: true, message: '请填写公司名称' }]"
            >
              <template #label
                ><span class="require_tip">*</span><span>公司名称</span></template
              >
            </van-field>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="primarycontactname"
              name="primarycontactname"
              label="提交人"
              aria-required="true"
              input-align="right"
              error-message-align="right"
              placeholder="请输入"
              :rules="[{ required: true, message: '请填写提交人' }]"
            >
              <template #label
                ><span class="require_tip">*</span><span>提交人</span></template
              >
            </van-field>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="primarycontactphone"
              name="primarycontactphone"
              label="联系电话"
              aria-required="true"
              input-align="right"
              error-message-align="right"
              placeholder="请输入"
              :rules="Rules.tel"
            >
              <template #label
                ><span class="require_tip">*</span
                ><span>联系电话</span></template
              >
            </van-field>
          </van-cell-group>

          
          
          
          

          <van-cell-group>
            <van-field
              v-model="productcode"
              name="productcode"
              label="产品编号"
              aria-required="true"
              input-align="right"
              error-message-align="right"
              placeholder="请输入"
              :rules="[{ required: true, message: '请填写产品编号' }]"
            >
              <template #label
                ><span class="require_tip">*</span><span>产品编号</span></template
              >
            </van-field>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="goodsarrived"
              name="goodsarrived"
              label="到货数量"
              aria-required="true"
              input-align="right"
              error-message-align="right"
              placeholder="请输入"
              :rules="[{ required: true, message: '请填写到货数量' }]"
            >
              <template #label
                ><span class="require_tip">*</span><span>到货数量</span></template
              >
            </van-field>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="qualitysuper"
              name="qualitysuper"
              label="客诉数量"
              aria-required="true"
              input-align="right"
              error-message-align="right"
              placeholder="请输入"
              :rules="[{ required: true, message: '请填写客诉数量' }]"
            >
              <template #label
                ><span class="require_tip">*</span><span>客诉数量</span></template
              >
            </van-field>
          </van-cell-group>
          <van-cell-group >
            <van-field
              v-model="soundtrack"
              rows="2"
              autosize
              label="问题描述"
              type="textarea"
              maxlength="100"
              placeholder="请输入问题描述"
              show-word-limit
            />
          </van-cell-group>
        </div>
         <!-- 按钮 -->
      <div class="btn-group">
        <div
          class="resetting"
          @click="resetting"
        >重置</div>
        <div
          class="submit"
          v-if="!submiting"
          @click="submitData"
        >提交</div>
        <div
        class="submit opacity"
        v-else
      >提交</div>
      </div>
<!--       
        <div class="btn_area">
          <div class="btn btn_cancel" v-if="submiting" >取消</div>
          <div class="btn btn_grey" v-if="submiting" >签到中</div>
          <div class="btn"  v-else  @click="submitData">签到</div>
        </div> -->
      </van-form>
    </template>

    <script>
      
      let vm = new Vue({
        el: '#app',
        template: '#first',
        data: {
          accountname: "",
          primarycontactname: "",
          primarycontactphone: "",
          soundtrack: "",
          productcode: "",
          goodsarrived: '',
          qualitysuper: '',
          submiting:false
        },
        created: async function () {
          // this.cardTypeList = getCertificatesTypeList()
          // this.payTypeList = getPayMethodList()
          
        },
        methods: {
          onConfirmPicker(obj){
            this.showPicker=false;
            this.cooperation_text=obj.text
            this.cooperation_value=obj.value

          },
          getCampaignId () {
            var url = location.href
            var campaignId = getQueryString('campaignId', location.href)
            return campaignId
          },
          
          async getToken () {
            var para = {
              grant_type: 'client_credentials',
              client_id: '9999999',
              client_secret: 'oS7HhS4C'
            }
            var res = await axios({
              headers: {
                'Content-Type':
                  'application/x-www-form-urlencoded; charset=UTF-8'
              },
              transformRequest: [
                function (data) {
                  let qs = Qs
                  data = qs.stringify(data)
                  return data
                }
              ],
              url: `/${Api.OAUTH_TOKEN}`,
              method: 'post',
              baseURL: `${Api.API_URL}`,
              data: para
            })
            if (res.status === 200) {
              if (res.data) {
                this.token = res.data
              }
            }
          },
          /**
     * 获取选项集
     */
          async getOptions() {
            var res=await axios({
                headers: {
                  Authorization:
                    this.token.token_type + ' ' + this.token.access_token
                },
                url: `/${Api.GET_OPTIONS}`,
                method: 'get',
                baseURL: `${Api.API_URL}`,
                params:{
                  entityName:'lead',
                  optionSetName:'new_source'
                }
              })
              if (res.status === 200) {
                if(res.data){
                  res.data.data.map(item=>{
                     if(item.Label==='活动展会'){
                        this.source=item.Value;
                     }
                  })

                }
              }
        },

          /**
     * 获取选项集
     */
     async getCooperationOptions() {
        var res=await axios({
            headers: {
              Authorization:
                this.token.token_type + ' ' + this.token.access_token
            },
            url: `/${Api.GET_LIST}`,
            method: 'post',
            baseURL: `${Api.API_URL}`,
            data:{
              logicNames:'new_enterprise_natures' ,
              OrderBy: ['new_new_enterprisenature asc'] 
            }
          })
          if (res.status === 200) {
            if(res.data){
              res.data.data.List.map(item=>{
                this.columns.push({
                  text:item.new_name,
                  value:item.new_enterprise_natureid
                }) 
              })

            }
          }
    },
          /**
           * 请求数据接口
           */
          async getCampaignData () {
            vant.Toast.loading('数据加载中...',2);
            var that=this;
            var campaignId = this.getCampaignId()
            if (campaignId) {
            var res=await axios({
                headers: {
                  Authorization:
                    this.token.token_type + ' ' + this.token.access_token
                },
                url: `/${Api.GetSingle}`,
                method: 'post',
                baseURL: `${Api.API_URL}`,
                data: {
                  logicNames: 'campaigns',
                  entityId: campaignId,
                  FormattedValues: true
                }
              })
              if (res.status === 200) {
                if(res.data){
                  console.log(res.data)
                  vant.Toast.clear();
                  this.new_from=res.data.data.name
                  this.subject=res.data.data.name
                  this.campaignId=res.data.data.campaignid
                  this.companyVerify=res.data.data['_new_rbusinessunitid_value@OData.Community.Display.V1.FormattedValue']==='国际营销事业部'
                 // this._ownerid_value=res.data.data._ownerid_value; //因为有后台工作流，无需传这三个值
                 // this._new_businessunitid_value=res.data.data._new_businessunitid_value;
                 // this._new_rbusinessunitid_value=res.data.data._new_rbusinessunitid_value;
                  
                  let created=res.data.data._createdby_value;
                  // let  handerId=this.getHandlerIds();
                  // if(handerId.indexOf(created)>=0){
                  //    this.showFields=true;
                  // }
                }
              }
            }
          },

         
          /**
           * 提交数据
           */
          async submitData () {
            this.$refs.myform.validate().then(() => {
                this.submiting = true
                var data={
                  accountname: this.accountname,
                  primarycontactname:this.primarycontactname,
                  primarycontactphone: this.primarycontactphone,
                  soundtrack: this.soundtrack,
                  productcode: this.productcode,
                  goodsarrived:Number(this.goodsarrived),
                  qualitysuper:Number(this.qualitysuper)
                }
               
                  axios({
                    url: `/${Api.ADD_RECORD}`,
                    method: 'post',
                    baseURL: `${Api.API_URL}`,
                    data: data
                  }).then(res => {
                    console.log('res',res)
                    var data=res.data
                    if (data.IsSuccess) {
                      this.submiting = false
                      window.location.href='./success.html'
                    }else{
                      this.submiting = false
                       window.location.href='./fail.html' 
                    }
                  }).catch((err) => {
                    console.log('err',err)
                    vant.Toast.fail(`提交失败`,2);
                    this.submiting = false
                    setTimeout(()=>{window.location.href='./fail.html' },2000)
                  })
              })
              .catch((err) => {
                console.log('err',err)
              })
          },
          resetting(){
            this.accountname='';
            this.primarycontactname='';
            this.primarycontactphone='';
            this.soundtrack='';
            this.productcode='';
            this.goodsarrived='';
            this.qualitysuper='';
            this.submiting='';
          },  
          /**
           *格式化日期
           */
          dateFilter (value) {
            if (value) {
              let date = new Date(value)
              let year = date.getFullYear()
              let month = date.getMonth() + 1
              let day = date.getDate()
              let monthStr = month < 10 ? '0' + month : month
              let dayStr = day < 10 ? '0' + day : day
              let str = year + '-' + monthStr + '-' + dayStr
              return str
            }
          }
        }
      })
    </script>
  </body>
</html>
